<!DOCTYPE html>
<html>

<head>
    <title>个人页面</title>
    <meta charset="utf-8"/>
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <link rel="stylesheet" href="/js/bootstrap-4.1.1-dist/css/bootstrap.min.css">
    <script src="/js/jquery/jquery.min.js"></script>
    <script src="/js/bootstrap-4.1.1-dist/js/bootstrap.min.js"></script>
    <link rel="stylesheet" href="/css/font/css/font-awesome.min.css">
    <link rel="stylesheet" href="/css/reset.css"/>
    <link rel="stylesheet" href="/css/userProfiles.css"/>
    <script src="/js/plugins/jrender/jrender.min.js"></script>
    <link rel="stylesheet" href="/js/plugins/dialog2/dialog.css">
    <script src="/js/plugins/dialog2/dialog.min.js"></script>
    <script src="/js/checkLogin.js"></script>
    <script src="/js/common.js"></script>
    <script>
        $(function(){
            //获取作者id
            var authorId = getParams().id;
            if (authorId) {
                $.get(baseUrl+"/users/"+authorId,function(data){
                    $(".container.bg").renderValues(data,{
                        getHref:getHref
                    });
                    $(".container.bg").css("background-image","url("+data.coverImgUrl+")");
                });

                //游记分页
                var currentPage = 1;//定义当前页,默认为1
                var arr = [];//定义一个数组,用来装所有的分页数据
                var totalPage;//定义总页数
                var loading = false;//判断是否真正加载数据
                function query() {
                    if (loading == true) {
                        return;
                    }
                    loading = true;
                    $.get(baseUrl + "/users/"+authorId+"/travels", {currentPage: currentPage}, function (data) {
                        $("#travels-tab span").html(data.total);
                        totalPage = data.pages;
                        //合并数据
                        $.merge(arr, data.list);
                        //改变数据格式
                        var json = {list: arr};
                        // 使用jrender 插件渲染数据 到页面
                        $("#travels").renderValues(json, {
                            getHref: getHref
                        });
                        currentPage++;
                        loading = false;
                    });
                };
                query();
                $(window).scroll(function () {
                    if ($(window).height() + $(document).scrollTop()+1 >= $(document).height()) {
                        if (currentPage <= totalPage) {
                            query();
                        } else {
                            $(document).dialog({
                                type: 'notice',
                                infoText: '已经到底啦',
                                autoClose: 2500,
                                position: 'bottom'  // center: 居中; bottom: 底部
                            });
                        }
                    }
                });

                //点评分页
                var commentCurrentPage = 1;//定义当前页,默认为1
                var commentArr = [];//定义一个数组,用来装所有的分页数据
                var commentTotalPage;//定义总页数
                var commentLoading = false;//判断是否真正加载数据
                function commentQuery() {
                    if (commentLoading == true) {
                        return;
                    }
                    commentLoading = true;
                    $.get(baseUrl + "/users/"+authorId+"/comments", {currentPage: commentCurrentPage}, function (data) {
                        $("#comments-tab span").html(data.total);
                        commentTotalPage = data.pages;
                        //合并数据
                        $.merge(commentArr, data.list);
                        //改变数据格式
                        var json = {list: commentArr};
                        // 使用jrender 插件渲染数据 到页面
                        $("#comments").renderValues(json, {
                            getStarNum:function(item,value){
                                var star = '';
                                for (var i =0;i<value;i++){
                                    star+='<i class="fa fa-star"></i>';
                                }
                                for (var i =0;i<5-value;i++){
                                    star+='<i class="fa fa-star-o"></i>';
                                }
                                $(item).html(star);
                            },
                            getHref: getHref
                        });
                        commentCurrentPage++;
                        commentLoading = false;
                    });
                };
                commentQuery();
                $(window).scroll(function () {
                    if ($(window).height() + $(document).scrollTop()+1 >= $(document).height()) {
                        if (commentCurrentPage <= commentTotalPage) {
                            commentQuery();
                        } else {
                            $(document).dialog({
                                type: 'notice',
                                infoText: '已经到底啦',
                                autoClose: 2500,
                                position: 'bottom'  // center: 居中; bottom: 底部
                            });
                        }
                    }
                });
                //私信
                $("#letterBtn").click(function(){
                    location.href="/chat/chat.html?id="+authorId;
                });
                //关注
                //获取该用户的关注数和粉丝数
                var funsNum;
                var focusNum;
                $.get(baseUrl+"/users/"+authorId+"/focusFuns",function(data){
                    funsNum = data.funsNum;
                    focusNum = data.focusNum;
                    $("#funsNum span:first").html(funsNum);
                    $("#focusNum span:first").html(focusNum);
                });
                //0:没有关注;1:关注
                var focu;//判断是否关注状态
                //判断登录用户是否关注了作者用户
                $.get(baseUrl+"/users/"+user.id+"/"+authorId,function(data){
                    focu=data;
                    console.log(focu);
                    if (focu == 1) {
                        $("#followBtn").html("取消关注")
                    }else if (focu == 0){
                        $("#followBtn").html("关注")
                    }
                });
                $("#followBtn").click(function(){
                    if (focu == 1) {
                        focu = 0;
                        $(this).html("关注")
                        $("#funsNum span:first").html(funsNum-1);
                        funsNum=funsNum-1;
                        if (user.id == authorId) {
                            $("#focusNum span:first").html(focusNum-1);
                            focusNum=focusNum-1;
                        }
                        //取消关注
                        $.ajax({
                            url:baseUrl+"/users/unFuns/"+user.id+"/"+authorId,
                            type:"delete"
                        });
                    }else if (focu == 0){
                        focu = 1;
                        $(this).html("取消关注")
                        $("#funsNum span:first").html(funsNum+1);
                        funsNum=funsNum+1;
                        if (user.id == authorId) {
                            $("#focusNum span:first").html(focusNum+1);
                            focusNum=focusNum+1;
                        }
                        //添加关注
                        $.ajax({
                            url:baseUrl+"/users/funs/"+user.id+"/"+authorId,
                            type:"post"
                        });
                    }
                });
            }
        })
    </script>
</head>
<body style="background: url('/upload/2.bmp')">
<div class="container bg" style="background-image: url(/img/user/bg.jpeg);">
    <a href="javascript:history.go(-1);" class="my-arrow">
    <!--<a href="/index.html" class="my-arrow">-->
        <span><i class="fa fa-chevron-left fa-2x"></i></span>
    </a>
    <div class="container">
        <div class="info">
            <img class="rounded-circle" width="17%" render-src="headImgUrl">
            <p class="name" render-html="nickName">奋斗的小蜜蜂</p>
            <p render-html="sign">一直奋斗的小蜜蜂</p>

            <div class="row num">
                <div class="col-2 border border-left-0 border-top-0 border-bottom-0">
                    <a id="focusNum" href="#" data-url="/mine/myFocus.html?id=" render-fun="getHref" render-key="id">
                        <div>
                            <span>1</span>
                        </div>
                        <div>
                            <span>关注</span>
                        </div>
                    </a>
                </div>
                <div class="col-2">
                    <a id="funsNum" href="#" data-url="/mine/myFuns.html?id=" render-fun="getHref" render-key="id">
                        <div>
                            <span>0</span>
                        </div>
                        <div>
                            <span>粉丝</span>
                        </div>
                    </a>
                </div>
                <div class="col">
                    <button class="btn btn-outline-light ibtn" id="letterBtn">私信</button>
                    <button class="btn btn-success ibtn" id="followBtn">关注</button>
                </div>
            </div>
        </div>
    </div>
</div>

<div class="tabs">
    <ul class="nav nav-pills nav-justified  border border-left-0 border-top-0 border-right-0" id="pills-tab"
        role="tablist">
        <li class="nav-item">
            <a class="nav-link active" id="travels-tab" data-toggle="pill" href="#travels">
                TA的游记[<span>1</span>]
            </a>
        </li>
        <li class="nav-item">
            <a class="nav-link " id="comments-tab" data-toggle="pill" href="#comments">
                TA的点评[<span>1</span>]
            </a>
        </li>
        <li class="nav-item">
            <a class="nav-link" id="pills-contact-tab" data-toggle="pill" href="#pills-contact">
                TA的旅行单[<span>0</span>]
            </a>
        </li>
    </ul>
    <div class="container tab-content" id="pills-tabContent">
        <div class="tab-pane fade show active" id="travels">
            <dl class="list" render-loop="list">
                <dd>
                    <a data-url="travelContent.html?id=" render-fun="getHref" render-key="list.id">
                        <img render-src="list.coverUrl">
                        <p><span class="title" render-html="list.title">入住长隆熊猫酒店，天天都是儿童节</span>
										<span class="span-right">
						 				<span>0</span> <i class="fa fa-thumbs-o-up"></i></span>
                        </p>
                    </a>
                    <hr>
                </dd>
            </dl>
        </div>

        <div class="comment tab-pane fade " id="comments">

            <div render-loop="list">
                <div class="row">
                    <div class="col-2 comment-head">
                        <img class="rounded-circle" render-src="list.user.headImgUrl">
                    </div>
                    <div class="col">
                        <span class="comment-star" render-fun="getStarNum" render-key="list.starNum">
                            <!--<i class="fa fa-star"></i>
                            <i class="fa fa-star"></i>
                            <i class="fa fa-star"></i>
                            <i class="fa fa-star-o"></i>
                            <i class="fa fa-star-o"></i>-->
                        </span>

                        <span class="comment-date" render-html="list.createTime">2018-07-11</span>
                        <div class="comment-content">
                            <a data-url="strategyComment.html?id=" render-fun="getHref" render-key="list.id">
                                <p render-html="list.content">骑了个单车到沙面，春风把从上下九和宝华路带来的燥热吹散。沙面临江，下午的时光让这富有异国风情的公园显得更加宁静惬意，哪怕...</p>
                            </a>
                        </div>
                        <ul class="comment-img" render-loop="list.imgsUrls">
                            <li>
                                <img render-src="list.imgsUrls.self">
                            </li>
                        </ul>

                        <div class="comment-link">
                            <a data-url="strategyCatalogs.html?id=" render-fun="getHref" render-key="list.strategy.id">
                                <img render-src="list.strategy.coverUrl"> <span render-html="title">广州攻略</span>
                                <i class="fa fa-angle-right fa-2x"></i>
                            </a>
                        </div>

                    </div>
                </div>
            </div>

        </div>
        <div class="tab-pane fade" id="pills-contact">.3333..</div>
    </div>
</div>


</body>
</html>